<template>
  <u-popup :show="modelValue" round="20" @close="closeAgreePrivacy">
    <view class="popup-wraper h-800rpx p-30rpx">
      <!-- <view class="text-lg text-black font-bold">
        <span>{{ initTitle }}</span>
      </view> -->

      <view v-if="type === 1" class="flex flex-col">
        <span class="pt-30rpx text-black font-bold">《隐私协议》</span>

        <span class="pt-30rpx text-sm text-black">1. 引言</span>
        <span class="pt-10rpx text-sm text-black">欢迎使用与书加小程序（以下简称“本服务”）。我们重视您的隐私权，并致力于保护您向我们提供的个人信息。本隐私协议旨在说明我们如何收集、使用、披露和保护您的信息。</span>
        <span class="pt-30rpx text-sm text-black">2. 收集的信息类型</span>
        <span class="pt-10rpx text-sm text-black">个人信息：包括但不限于姓名、联系方式等。</span>
        <span class="pt-10rpx text-sm text-black">非个人信息：例如设备信息、浏览行为等。</span>
        <span class="pt-30rpx text-sm text-black">3. 信息的使用方式</span>
        <span class="pt-10rpx text-sm text-black">我们将仅在为提供服务所必需的情况下使用您的信息，如个性化内容推荐、客户服务等。</span>
        <span class="pt-30rpx text-sm text-black">4. 信息共享与披露</span>
        <span class="pt-10rpx text-sm text-black">除非得到您的同意或法律要求，我们不会向第三方出售或分享您的个人信息。</span>
        <span class="pt-30rpx text-sm text-black">5. 数据安全</span>
        <span class="pt-10rpx text-sm text-black">我们采取合理的安全措施来保护您的信息免遭未经授权的访问、修改或泄露。</span>
        <span class="pt-30rpx text-sm text-black">6. 您的权利</span>
        <span class="pt-10rpx text-sm text-black">您可以随时查看、更新或删除您的个人信息。</span>
        <span class="pt-30rpx text-sm text-black">7. 隐私政策变更</span>
        <span class="pt-10rpx text-sm text-black">我们保留对本隐私协议进行更新的权利，并会在必要时通知您。</span>
        <span class="pt-30rpx text-sm text-black">8. 联系我们</span>
        <span class="pt-10rpx text-sm text-black">如果您有任何问题或需要进一步的帮助，请联系400-008-7061电话</span>
        <span class="pt-30rpx text-sm text-black">生效日期：2025年6月01日</span>
      </view>

      <view v-if="type === 2" class="flex flex-col">
        <span class="pt-30rpx text-black font-bold">《用户协议》》</span>

        <span class="pt-30rpx text-sm text-black">1. 协议接受</span>
        <span class="pt-10rpx text-sm text-black">欢迎使用与书加小程序。通过使用本服务，您即表示同意接受本用户协议的所有条款。</span>
        <span class="pt-30rpx text-sm text-black">2. 用户行为准则</span>
        <span class="pt-10rpx text-sm text-black">用户应遵守所有相关法律法规。</span>
        <span class="pt-10rpx text-sm text-black">禁止任何非法或侵犯他人权利的行为。</span>
        <span class="pt-30rpx text-sm text-black">3. 服务描述</span>
        <span class="pt-10rpx text-sm text-black">本服务的具体功能和服务范围可能会有所变化，我们会尽力保持服务的稳定性和可靠性。</span>
        <span class="pt-30rpx text-sm text-black">4. 用户内容</span>
        <span class="pt-10rpx text-sm text-black">用户对其在平台上发布的所有内容负责，应保证其不违反任何法律规定。</span>
        <span class="pt-30rpx text-sm text-black">5. 知识产权</span>
        <span class="pt-10rpx text-sm text-black">本服务中包含的所有知识产权均归青岛悦读历教育科技有限公司所有或已获得合法授权。</span>
        <span class="pt-30rpx text-sm text-black">6. 免责声明</span>
        <span class="pt-10rpx text-sm text-black">对于因使用本服务而产生的任何直接或间接损失，青岛悦读历教育科技有限公司不承担任何责任。</span>
        <span class="pt-30rpx text-sm text-black">7. 终止服务</span>
        <span class="pt-10rpx text-sm text-black">我们保留在任何时间终止或暂停任何用户访问本服务的权利。</span>
        <span class="pt-30rpx text-sm text-black">8. 法律适用与争议解决</span>
        <span class="pt-10rpx text-sm text-black">本协议受中华人民共和国法律管辖，任何争议应提交至有管辖权的法院解决。</span>
        <span class="pt-30rpx text-sm text-black">9. 修改和更新</span>
        <span class="pt-10rpx text-sm text-black">我们有权在任何时候修改本协议，并会在网站上公布最新的版本。</span>
        <span class="pt-30rpx text-sm text-black">10. 联系方式</span>
        <span class="pt-10rpx text-sm text-black">如果您对本协议有任何疑问，请联系400-008-7061电话</span>
        <span class="pt-30rpx text-sm text-black">生效日期：2025年06月01日</span>
      </view>

      <!-- <view class="mt-30rpx flex items-center justify-around pt-10rpx">
        <view style="min-width: 100px">
          <button class="button button-default" @click="disagree">
            拒绝
          </button>
        </view>
        <view style="min-width: 100px">
          <button
            :id="agreePrivacyId"
            class="button button-primary"
            open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="agree"
          >
            同意
          </button>
        </view>
      </view> -->
    </view>
  </u-popup>
</template>

<script setup lang="ts">
interface AgreePrivacyProps {
  modelValue: boolean;
  type: number; // 1-隐私协议 2-用户协议
  // 标题
  title: string;
  // 副标题
  subTitle: string;
  // 禁止自动检测隐私
  disableCheckPrivacy: boolean;
  // 按钮id 必填项不填写时授权按钮id必须为agree-btn
  agreePrivacyId: string;
}

const props = withDefaults(defineProps<AgreePrivacyProps>(), {
  modelValue: false,
  type: 1,
  title: '',
  subTitle: '',
  disableCheckPrivacy: true,
  agreePrivacyId: 'agree-btn',
});

const emit = defineEmits(['update:modelValue', 'needPrivacyAuthorization', 'agree', 'disagree']);
// 初始化的标题
const initTitle = ref<string>('隐私政策概要');
// 初始化的副标题
const initSubTitle = ref<string>('');
// 隐私政策
const initPrivacyContractName = ref<string>('隐私政策');

// 打开隐私
function openAgreePrivacy() {
  emit('update:modelValue', true);
}

// 关闭隐私
function closeAgreePrivacy() {
  emit('update:modelValue', false);
}

// 需要初始化的数据
function initData() {
  initTitle.value = props.title || initTitle.value;
  initSubTitle.value
    = props.subTitle
    || `亲爱的用户，感谢您一直以来的支持!为了更好地保护您的权益，同时遵守相关监管要求，请认真阅读${initPrivacyContractName.value}，特向您说明如下:`;
}

// 检测是否授权
function checkPrivacySetting() {
  wx.getPrivacySetting({
    success: (res: any) => {
      // 未授权弹框
      if (res.needAuthorization) {
        initPrivacyContractName.value = res.privacyContractName;
        initData();
        // 是否禁用 自动检测隐私并弹框
        if (!props.disableCheckPrivacy) {
          // 需要弹出隐私协议
          openAgreePrivacy();
        }
      }
      else {
        // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
        // wx.getUserProfile()
      }
    },
    fail: (e: any) => {
      console.log(e);
    },
  });
}

onMounted(() => {
  // 检测是否授权
  checkPrivacySetting();

  // // 监听授权
  // wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
  //   emit('update:modelValue', true);
  //   // 回调
  //   emit('needPrivacyAuthorization', resolve, eventInfo);
  // });
});
</script>

<style scoped lang="scss">
.popup-wraper {
  overflow: auto;
}
.button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 80rpx;
  padding: 10px 20px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 18rpx;
  box-sizing: border-box;
  flex-direction: row;
  font-weight: 500;
  line-height: 1.5;
  //border-width: 1px;
  //border-style: solid;
}

.button-lg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  //height: 80rpx;
  padding: 12px 22px;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  flex-direction: row;
  font-weight: 700;
  line-height: 1.5;
  //border-width: 1px;
  //border-style: solid;
}

.button-default {
  color: #07c160;
  background-color: rgb(0 0 0 / 5%);
}

.button-primary {
  color: #fff;
  background-color: #07c160;
}

button {
  padding: 0;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  outline: none;
  line-height: inherit;
}

button::after {
  border: none;
}

.text-decoration {
  text-decoration: underline;
  color: #07c160;
}
</style>
